<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Transitions Test: transitioning inherited property values</title>
        <meta name="assert" content="Test checks that inherited property values that are not transitioned on a parent element start a transition">
        <link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
        <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
        <meta name="flags" content="dom ">
        
        <script src="/resources/testharness.js" type="text/javascript"></script>
        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
        
        <script src="./support/vendorPrefix.js" type="text/javascript"></script>
        <script src="./support/helper.js" type="text/javascript"></script>
        <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
        <script src="./support/generalParallelTest.js" type="text/javascript"></script>
        <script src="./support/properties.js" type="text/javascript"></script>

        <style type="text/css">
            #offscreen {
                position: absolute;
                top: -100000px;
                left: -100000px;
                width: 100000px;
                height: 100000px;
            }
        </style>
        
        <script id="metadata_cache">/*
        {
          "background-color color(rgba) / values": {},
          "background-color color(rgba) / events": {},
          "background-position length(pt) / values": {},
          "background-position length(pt) / events": {},
          "background-position length(pc) / values": {},
          "background-position length(pc) / events": {},
          "background-position length(px) / values": {},
          "background-position length(px) / events": {},
          "background-position length(em) / values": {},
          "background-position length(em) / events": {},
          "background-position length(ex) / values": {},
          "background-position length(ex) / events": {},
          "background-position length(mm) / values": {},
          "background-position length(mm) / events": {},
          "background-position length(cm) / values": {},
          "background-position length(cm) / events": {},
          "background-position length(in) / values": {},
          "background-position length(in) / events": {},
          "background-position percentage(%) / values": {},
          "background-position percentage(%) / events": {},
          "border-top-width length(pt) / values": {},
          "border-top-width length(pt) / events": {},
          "border-top-width length(pc) / values": {},
          "border-top-width length(pc) / events": {},
          "border-top-width length(px) / values": {},
          "border-top-width length(px) / events": {},
          "border-top-width length(em) / values": {},
          "border-top-width length(em) / events": {},
          "border-top-width length(ex) / values": {},
          "border-top-width length(ex) / events": {},
          "border-top-width length(mm) / values": {},
          "border-top-width length(mm) / events": {},
          "border-top-width length(cm) / values": {},
          "border-top-width length(cm) / events": {},
          "border-top-width length(in) / values": {},
          "border-top-width length(in) / events": {},
          "border-right-width length(pt) / values": {},
          "border-right-width length(pt) / events": {},
          "border-right-width length(pc) / values": {},
          "border-right-width length(pc) / events": {},
          "border-right-width length(px) / values": {},
          "border-right-width length(px) / events": {},
          "border-right-width length(em) / values": {},
          "border-right-width length(em) / events": {},
          "border-right-width length(ex) / values": {},
          "border-right-width length(ex) / events": {},
          "border-right-width length(mm) / values": {},
          "border-right-width length(mm) / events": {},
          "border-right-width length(cm) / values": {},
          "border-right-width length(cm) / events": {},
          "border-right-width length(in) / values": {},
          "border-right-width length(in) / events": {},
          "border-bottom-width length(pt) / values": {},
          "border-bottom-width length(pt) / events": {},
          "border-bottom-width length(pc) / values": {},
          "border-bottom-width length(pc) / events": {},
          "border-bottom-width length(px) / values": {},
          "border-bottom-width length(px) / events": {},
          "border-bottom-width length(em) / values": {},
          "border-bottom-width length(em) / events": {},
          "border-bottom-width length(ex) / values": {},
          "border-bottom-width length(ex) / events": {},
          "border-bottom-width length(mm) / values": {},
          "border-bottom-width length(mm) / events": {},
          "border-bottom-width length(cm) / values": {},
          "border-bottom-width length(cm) / events": {},
          "border-bottom-width length(in) / values": {},
          "border-bottom-width length(in) / events": {},
          "border-left-width length(pt) / values": {},
          "border-left-width length(pt) / events": {},
          "border-left-width length(pc) / values": {},
          "border-left-width length(pc) / events": {},
          "border-left-width length(px) / values": {},
          "border-left-width length(px) / events": {},
          "border-left-width length(em) / values": {},
          "border-left-width length(em) / events": {},
          "border-left-width length(ex) / values": {},
          "border-left-width length(ex) / events": {},
          "border-left-width length(mm) / values": {},
          "border-left-width length(mm) / events": {},
          "border-left-width length(cm) / values": {},
          "border-left-width length(cm) / events": {},
          "border-left-width length(in) / values": {},
          "border-left-width length(in) / events": {},
          "border-top-color color(rgba) / values": {},
          "border-top-color color(rgba) / events": {},
          "border-right-color color(rgba) / values": {},
          "border-right-color color(rgba) / events": {},
          "border-bottom-color color(rgba) / values": {},
          "border-bottom-color color(rgba) / events": {},
          "border-left-color color(rgba) / values": {},
          "border-left-color color(rgba) / events": {},
          "padding-bottom length(pt) / values": {},
          "padding-bottom length(pt) / events": {},
          "padding-bottom length(pc) / values": {},
          "padding-bottom length(pc) / events": {},
          "padding-bottom length(px) / values": {},
          "padding-bottom length(px) / events": {},
          "padding-bottom length(em) / values": {},
          "padding-bottom length(em) / events": {},
          "padding-bottom length(ex) / values": {},
          "padding-bottom length(ex) / events": {},
          "padding-bottom length(mm) / values": {},
          "padding-bottom length(mm) / events": {},
          "padding-bottom length(cm) / values": {},
          "padding-bottom length(cm) / events": {},
          "padding-bottom length(in) / values": {},
          "padding-bottom length(in) / events": {},
          "padding-left length(pt) / values": {},
          "padding-left length(pt) / events": {},
          "padding-left length(pc) / values": {},
          "padding-left length(pc) / events": {},
          "padding-left length(px) / values": {},
          "padding-left length(px) / events": {},
          "padding-left length(em) / values": {},
          "padding-left length(em) / events": {},
          "padding-left length(ex) / values": {},
          "padding-left length(ex) / events": {},
          "padding-left length(mm) / values": {},
          "padding-left length(mm) / events": {},
          "padding-left length(cm) / values": {},
          "padding-left length(cm) / events": {},
          "padding-left length(in) / values": {},
          "padding-left length(in) / events": {},
          "padding-right length(pt) / values": {},
          "padding-right length(pt) / events": {},
          "padding-right length(pc) / values": {},
          "padding-right length(pc) / events": {},
          "padding-right length(px) / values": {},
          "padding-right length(px) / events": {},
          "padding-right length(em) / values": {},
          "padding-right length(em) / events": {},
          "padding-right length(ex) / values": {},
          "padding-right length(ex) / events": {},
          "padding-right length(mm) / values": {},
          "padding-right length(mm) / events": {},
          "padding-right length(cm) / values": {},
          "padding-right length(cm) / events": {},
          "padding-right length(in) / values": {},
          "padding-right length(in) / events": {},
          "padding-top length(pt) / values": {},
          "padding-top length(pt) / events": {},
          "padding-top length(pc) / values": {},
          "padding-top length(pc) / events": {},
          "padding-top length(px) / values": {},
          "padding-top length(px) / events": {},
          "padding-top length(em) / values": {},
          "padding-top length(em) / events": {},
          "padding-top length(ex) / values": {},
          "padding-top length(ex) / events": {},
          "padding-top length(mm) / values": {},
          "padding-top length(mm) / events": {},
          "padding-top length(cm) / values": {},
          "padding-top length(cm) / events": {},
          "padding-top length(in) / values": {},
          "padding-top length(in) / events": {},
          "margin-bottom length(pt) / values": {},
          "margin-bottom length(pt) / events": {},
          "margin-bottom length(pc) / values": {},
          "margin-bottom length(pc) / events": {},
          "margin-bottom length(px) / values": {},
          "margin-bottom length(px) / events": {},
          "margin-bottom length(em) / values": {},
          "margin-bottom length(em) / events": {},
          "margin-bottom length(ex) / values": {},
          "margin-bottom length(ex) / events": {},
          "margin-bottom length(mm) / values": {},
          "margin-bottom length(mm) / events": {},
          "margin-bottom length(cm) / values": {},
          "margin-bottom length(cm) / events": {},
          "margin-bottom length(in) / values": {},
          "margin-bottom length(in) / events": {},
          "margin-left length(pt) / values": {},
          "margin-left length(pt) / events": {},
          "margin-left length(pc) / values": {},
          "margin-left length(pc) / events": {},
          "margin-left length(px) / values": {},
          "margin-left length(px) / events": {},
          "margin-left length(em) / values": {},
          "margin-left length(em) / events": {},
          "margin-left length(ex) / values": {},
          "margin-left length(ex) / events": {},
          "margin-left length(mm) / values": {},
          "margin-left length(mm) / events": {},
          "margin-left length(cm) / values": {},
          "margin-left length(cm) / events": {},
          "margin-left length(in) / values": {},
          "margin-left length(in) / events": {},
          "margin-right length(pt) / values": {},
          "margin-right length(pt) / events": {},
          "margin-right length(pc) / values": {},
          "margin-right length(pc) / events": {},
          "margin-right length(px) / values": {},
          "margin-right length(px) / events": {},
          "margin-right length(em) / values": {},
          "margin-right length(em) / events": {},
          "margin-right length(ex) / values": {},
          "margin-right length(ex) / events": {},
          "margin-right length(mm) / values": {},
          "margin-right length(mm) / events": {},
          "margin-right length(cm) / values": {},
          "margin-right length(cm) / events": {},
          "margin-right length(in) / values": {},
          "margin-right length(in) / events": {},
          "margin-top length(pt) / values": {},
          "margin-top length(pt) / events": {},
          "margin-top length(pc) / values": {},
          "margin-top length(pc) / events": {},
          "margin-top length(px) / values": {},
          "margin-top length(px) / events": {},
          "margin-top length(em) / values": {},
          "margin-top length(em) / events": {},
          "margin-top length(ex) / values": {},
          "margin-top length(ex) / events": {},
          "margin-top length(mm) / values": {},
          "margin-top length(mm) / events": {},
          "margin-top length(cm) / values": {},
          "margin-top length(cm) / events": {},
          "margin-top length(in) / values": {},
          "margin-top length(in) / events": {},
          "height length(pt) / values": {},
          "height length(pt) / events": {},
          "height length(pc) / values": {},
          "height length(pc) / events": {},
          "height length(px) / values": {},
          "height length(px) / events": {},
          "height length(em) / values": {},
          "height length(em) / events": {},
          "height length(ex) / values": {},
          "height length(ex) / events": {},
          "height length(mm) / values": {},
          "height length(mm) / events": {},
          "height length(cm) / values": {},
          "height length(cm) / events": {},
          "height length(in) / values": {},
          "height length(in) / events": {},
          "height percentage(%) / values": {},
          "height percentage(%) / events": {},
          "width length(pt) / values": {},
          "width length(pt) / events": {},
          "width length(pc) / values": {},
          "width length(pc) / events": {},
          "width length(px) / values": {},
          "width length(px) / events": {},
          "width length(em) / values": {},
          "width length(em) / events": {},
          "width length(ex) / values": {},
          "width length(ex) / events": {},
          "width length(mm) / values": {},
          "width length(mm) / events": {},
          "width length(cm) / values": {},
          "width length(cm) / events": {},
          "width length(in) / values": {},
          "width length(in) / events": {},
          "width percentage(%) / values": {},
          "width percentage(%) / events": {},
          "min-height length(pt) / values": {},
          "min-height length(pt) / events": {},
          "min-height length(pc) / values": {},
          "min-height length(pc) / events": {},
          "min-height length(px) / values": {},
          "min-height length(px) / events": {},
          "min-height length(em) / values": {},
          "min-height length(em) / events": {},
          "min-height length(ex) / values": {},
          "min-height length(ex) / events": {},
          "min-height length(mm) / values": {},
          "min-height length(mm) / events": {},
          "min-height length(cm) / values": {},
          "min-height length(cm) / events": {},
          "min-height length(in) / values": {},
          "min-height length(in) / events": {},
          "min-height percentage(%) / values": {},
          "min-height percentage(%) / events": {},
          "min-width length(pt) / values": {},
          "min-width length(pt) / events": {},
          "min-width length(pc) / values": {},
          "min-width length(pc) / events": {},
          "min-width length(px) / values": {},
          "min-width length(px) / events": {},
          "min-width length(em) / values": {},
          "min-width length(em) / events": {},
          "min-width length(ex) / values": {},
          "min-width length(ex) / events": {},
          "min-width length(mm) / values": {},
          "min-width length(mm) / events": {},
          "min-width length(cm) / values": {},
          "min-width length(cm) / events": {},
          "min-width length(in) / values": {},
          "min-width length(in) / events": {},
          "min-width percentage(%) / values": {},
          "min-width percentage(%) / events": {},
          "max-height length(pt) / values": {},
          "max-height length(pt) / events": {},
          "max-height length(pc) / values": {},
          "max-height length(pc) / events": {},
          "max-height length(px) / values": {},
          "max-height length(px) / events": {},
          "max-height length(em) / values": {},
          "max-height length(em) / events": {},
          "max-height length(ex) / values": {},
          "max-height length(ex) / events": {},
          "max-height length(mm) / values": {},
          "max-height length(mm) / events": {},
          "max-height length(cm) / values": {},
          "max-height length(cm) / events": {},
          "max-height length(in) / values": {},
          "max-height length(in) / events": {},
          "max-height percentage(%) / values": {},
          "max-height percentage(%) / events": {},
          "max-width length(pt) / values": {},
          "max-width length(pt) / events": {},
          "max-width length(pc) / values": {},
          "max-width length(pc) / events": {},
          "max-width length(px) / values": {},
          "max-width length(px) / events": {},
          "max-width length(em) / values": {},
          "max-width length(em) / events": {},
          "max-width length(ex) / values": {},
          "max-width length(ex) / events": {},
          "max-width length(mm) / values": {},
          "max-width length(mm) / events": {},
          "max-width length(cm) / values": {},
          "max-width length(cm) / events": {},
          "max-width length(in) / values": {},
          "max-width length(in) / events": {},
          "max-width percentage(%) / values": {},
          "max-width percentage(%) / events": {},
          "top length(pt) / values": {},
          "top length(pt) / events": {},
          "top length(pc) / values": {},
          "top length(pc) / events": {},
          "top length(px) / values": {},
          "top length(px) / events": {},
          "top length(em) / values": {},
          "top length(em) / events": {},
          "top length(ex) / values": {},
          "top length(ex) / events": {},
          "top length(mm) / values": {},
          "top length(mm) / events": {},
          "top length(cm) / values": {},
          "top length(cm) / events": {},
          "top length(in) / values": {},
          "top length(in) / events": {},
          "top percentage(%) / values": {},
          "top percentage(%) / events": {},
          "right length(pt) / values": {},
          "right length(pt) / events": {},
          "right length(pc) / values": {},
          "right length(pc) / events": {},
          "right length(px) / values": {},
          "right length(px) / events": {},
          "right length(em) / values": {},
          "right length(em) / events": {},
          "right length(ex) / values": {},
          "right length(ex) / events": {},
          "right length(mm) / values": {},
          "right length(mm) / events": {},
          "right length(cm) / values": {},
          "right length(cm) / events": {},
          "right length(in) / values": {},
          "right length(in) / events": {},
          "right percentage(%) / values": {},
          "right percentage(%) / events": {},
          "bottom length(pt) / values": {},
          "bottom length(pt) / events": {},
          "bottom length(pc) / values": {},
          "bottom length(pc) / events": {},
          "bottom length(px) / values": {},
          "bottom length(px) / events": {},
          "bottom length(em) / values": {},
          "bottom length(em) / events": {},
          "bottom length(ex) / values": {},
          "bottom length(ex) / events": {},
          "bottom length(mm) / values": {},
          "bottom length(mm) / events": {},
          "bottom length(cm) / values": {},
          "bottom length(cm) / events": {},
          "bottom length(in) / values": {},
          "bottom length(in) / events": {},
          "bottom percentage(%) / values": {},
          "bottom percentage(%) / events": {},
          "left length(pt) / values": {},
          "left length(pt) / events": {},
          "left length(pc) / values": {},
          "left length(pc) / events": {},
          "left length(px) / values": {},
          "left length(px) / events": {},
          "left length(em) / values": {},
          "left length(em) / events": {},
          "left length(ex) / values": {},
          "left length(ex) / events": {},
          "left length(mm) / values": {},
          "left length(mm) / events": {},
          "left length(cm) / values": {},
          "left length(cm) / events": {},
          "left length(in) / values": {},
          "left length(in) / events": {},
          "left percentage(%) / values": {},
          "left percentage(%) / events": {},
          "color color(rgba) / values": {},
          "color color(rgba) / events": {},
          "font-size length(pt) / values": {},
          "font-size length(pt) / events": {},
          "font-size length(pc) / values": {},
          "font-size length(pc) / events": {},
          "font-size length(px) / values": {},
          "font-size length(px) / events": {},
          "font-size length(em) / values": {},
          "font-size length(em) / events": {},
          "font-size length(ex) / values": {},
          "font-size length(ex) / events": {},
          "font-size length(mm) / values": {},
          "font-size length(mm) / events": {},
          "font-size length(cm) / values": {},
          "font-size length(cm) / events": {},
          "font-size length(in) / values": {},
          "font-size length(in) / events": {},
          "font-size percentage(%) / values": {},
          "font-size percentage(%) / events": {},
          "font-weight font-weight(keyword) / values": {},
          "font-weight font-weight(keyword) / events": {},
          "font-weight font-weight(numeric) / values": {},
          "font-weight font-weight(numeric) / events": {},
          "line-height number(integer) / values": {},
          "line-height number(integer) / events": {},
          "line-height number(decimal) / values": {},
          "line-height number(decimal) / events": {},
          "line-height length(pt) / values": {},
          "line-height length(pt) / events": {},
          "line-height length(pc) / values": {},
          "line-height length(pc) / events": {},
          "line-height length(px) / values": {},
          "line-height length(px) / events": {},
          "line-height length(em) / values": {},
          "line-height length(em) / events": {},
          "line-height length(ex) / values": {},
          "line-height length(ex) / events": {},
          "line-height length(mm) / values": {},
          "line-height length(mm) / events": {},
          "line-height length(cm) / values": {},
          "line-height length(cm) / events": {},
          "line-height length(in) / values": {},
          "line-height length(in) / events": {},
          "line-height percentage(%) / values": {},
          "line-height percentage(%) / events": {},
          "letter-spacing length(pt) / values": {},
          "letter-spacing length(pt) / events": {},
          "letter-spacing length(pc) / values": {},
          "letter-spacing length(pc) / events": {},
          "letter-spacing length(px) / values": {},
          "letter-spacing length(px) / events": {},
          "letter-spacing length(em) / values": {},
          "letter-spacing length(em) / events": {},
          "letter-spacing length(ex) / values": {},
          "letter-spacing length(ex) / events": {},
          "letter-spacing length(mm) / values": {},
          "letter-spacing length(mm) / events": {},
          "letter-spacing length(cm) / values": {},
          "letter-spacing length(cm) / events": {},
          "letter-spacing length(in) / values": {},
          "letter-spacing length(in) / events": {},
          "word-spacing length(pt) / values": {},
          "word-spacing length(pt) / events": {},
          "word-spacing length(pc) / values": {},
          "word-spacing length(pc) / events": {},
          "word-spacing length(px) / values": {},
          "word-spacing length(px) / events": {},
          "word-spacing length(em) / values": {},
          "word-spacing length(em) / events": {},
          "word-spacing length(ex) / values": {},
          "word-spacing length(ex) / events": {},
          "word-spacing length(mm) / values": {},
          "word-spacing length(mm) / events": {},
          "word-spacing length(cm) / values": {},
          "word-spacing length(cm) / events": {},
          "word-spacing length(in) / values": {},
          "word-spacing length(in) / events": {},
          "word-spacing percentage(%) / values": {},
          "word-spacing percentage(%) / events": {},
          "text-indent length(pt) / values": {},
          "text-indent length(pt) / events": {},
          "text-indent length(pc) / values": {},
          "text-indent length(pc) / events": {},
          "text-indent length(px) / values": {},
          "text-indent length(px) / events": {},
          "text-indent length(em) / values": {},
          "text-indent length(em) / events": {},
          "text-indent length(ex) / values": {},
          "text-indent length(ex) / events": {},
          "text-indent length(mm) / values": {},
          "text-indent length(mm) / events": {},
          "text-indent length(cm) / values": {},
          "text-indent length(cm) / events": {},
          "text-indent length(in) / values": {},
          "text-indent length(in) / events": {},
          "text-indent percentage(%) / values": {},
          "text-indent percentage(%) / events": {},
          "text-shadow shadow(shadow) / values": {},
          "text-shadow shadow(shadow) / events": {},
          "outline-color color(rgba) / values": {},
          "outline-color color(rgba) / events": {},
          "outline-offset length(pt) / values": {},
          "outline-offset length(pt) / events": {},
          "outline-offset length(pc) / values": {},
          "outline-offset length(pc) / events": {},
          "outline-offset length(px) / values": {},
          "outline-offset length(px) / events": {},
          "outline-offset length(em) / values": {},
          "outline-offset length(em) / events": {},
          "outline-offset length(ex) / values": {},
          "outline-offset length(ex) / events": {},
          "outline-offset length(mm) / values": {},
          "outline-offset length(mm) / events": {},
          "outline-offset length(cm) / values": {},
          "outline-offset length(cm) / events": {},
          "outline-offset length(in) / values": {},
          "outline-offset length(in) / events": {},
          "outline-width length(pt) / values": {},
          "outline-width length(pt) / events": {},
          "outline-width length(pc) / values": {},
          "outline-width length(pc) / events": {},
          "outline-width length(px) / values": {},
          "outline-width length(px) / events": {},
          "outline-width length(em) / values": {},
          "outline-width length(em) / events": {},
          "outline-width length(ex) / values": {},
          "outline-width length(ex) / events": {},
          "outline-width length(mm) / values": {},
          "outline-width length(mm) / events": {},
          "outline-width length(cm) / values": {},
          "outline-width length(cm) / events": {},
          "outline-width length(in) / values": {},
          "outline-width length(in) / events": {},
          "clip rectangle(rectangle) / values": {},
          "clip rectangle(rectangle) / events": {},
          "crop rectangle(rectangle) / values": {},
          "crop rectangle(rectangle) / events": {},
          "vertical-align length(pt) / values": {},
          "vertical-align length(pt) / events": {},
          "vertical-align length(pc) / values": {},
          "vertical-align length(pc) / events": {},
          "vertical-align length(px) / values": {},
          "vertical-align length(px) / events": {},
          "vertical-align length(em) / values": {},
          "vertical-align length(em) / events": {},
          "vertical-align length(ex) / values": {},
          "vertical-align length(ex) / events": {},
          "vertical-align length(mm) / values": {},
          "vertical-align length(mm) / events": {},
          "vertical-align length(cm) / values": {},
          "vertical-align length(cm) / events": {},
          "vertical-align length(in) / values": {},
          "vertical-align length(in) / events": {},
          "vertical-align percentage(%) / values": {},
          "vertical-align percentage(%) / events": {},
          "opacity number[0,1](zero-to-one) / values": {},
          "opacity number[0,1](zero-to-one) / events": {},
          "visibility visibility(keyword) / values": {},
          "visibility visibility(keyword) / events": {},
          "z-index integer(integer) / values": {},
          "z-index integer(integer) / events": {}
        }
        */</script>
    </head>
    <body>
        <!-- required by testharnessreport.js -->
        <div id="log"></div>
        <!-- elements used for testing -->
        <div id="fixture" class="fixture">
            <div class="container">
                <div class="transition">Text sample</div>
            </div>
        </div>
        <div id="offscreen"></div>
        
        <!--
            SEE ./support/README.md for an abstract explanation of the test procedure
            http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
        -->

        <script>
            // http://www.w3.org/TR/css3-transitions/#starting
            // Implementations also must not start a transition when the computed value changes because 
            // it is inherited (directly or indirectly) from another element that is transitioning the same property.
            // Note: Parent element doesn't transition, so above quote doesn't apply!
            
            // this test takes its time, give it a minute to run
            var timeout = 60000;
            setup({timeout: timeout});
            
            var tests = getPropertyTests();
            // for testing, limit to a couple of iterations
            // tests = tests.slice(10, 30);
            // or filter using one of:
            // tests = filterPropertyTests(tests, "background-color color(rgba)");
            // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
            // tests = filterPropertyTests(tests, /^background-color/);
            
            // general transition-duration
            var duration = '0.5s';

            runParallelAsyncHarness({
                // array of test data
                tests: tests,
                // the number of tests to run in parallel
                testsPerSlice: 50,
                // milliseconds to wait before calling teardown and ending test
                duration: parseFloat(duration) * 1000,
                // the global suite timeout
                timeout: timeout,
                // prepare individual test
                setup: function(data, options) {
                    // clone and overwrite initial styles to be
                    // applied to #transition
                    var inherited = extend({}, data.from);
                    inherited[data.property] = 'inherit';
                    
                    var styles = {
                        // as we're testing inheritance, #fixture is our new parent
                        '.fixture': data.parentStyle,
                        // all styles including transition apply to to #container so they
                        // can inherit down to #transition
                        '.container': extend({}, data.parentStyle, data.from),
                        '.container.to': data.to,
                        '.container.how': {},
                        // #transition only inherits and listens for transition events
                        '.transition': inherited,
                        '.transition.to' : {},
                        '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
                    };

                    generalParallelTest.setup(data, options);
                    generalParallelTest.addStyles(data, options, styles);
                },
                // cleanup after individual test
                teardown: generalParallelTest.teardown,
                // invoked prior to running a slice of tests
                sliceStart: generalParallelTest.sliceStart,
                // invoked after running a slice of tests
                sliceDone: generalParallelTest.sliceDone,
                // test cases, make them as granular as possible
                cases: {
                    // test property values while transitioning
                    // values.start kicks off a transition
                    'values': {
                        // run actual test, assertions can be used here!
                        start: function(test, data, options) {
                            // identify initial and target values
                            generalParallelTest.getStyle(data);
                            // make sure values differ, if they don't, the property could most likely not be parsed
                            assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
                            // kick off the transition
                            generalParallelTest.startTransition(data);
                            
                            // make sure we didn't get the target value immediately.
                            // If we did, there wouldn't be a transition!
                            var current = data.transition.computedStyle(data.property);
                            assert_not_equals(current, data.transition.to, "must not be target value after start");
                        },
                        done: function(test, data, options) {
                            // make sure the property's value were neither initial nor target while transitioning
                            test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition'));
                        }
                    },
                    // test TransitionEnd events
                    'events': {
                        done: function(test, data, options) {
                            // make sure there were no events on parent
                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
                            // make sure we got the event for the tested property only
                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
                        }
                    }
                },
                // called once all tests are done
                done: generalParallelTest.done
            });
        </script>
    </body>
</html>